<script setup>
import {reactive, watch, defineEmits} from 'vue';

const props = defineProps({
  title: {
    type: String,
    required: true,
  },
  buttonText: {
    type: String,
    required: true,
  },
})
let emit = defineEmits(['onChange','onHandle'])

const inputValue = ref('')
const form = reactive({
  // eslint-disable-next-line camelcase
  teacher_name: "", //年级主任姓名
  teacher_id: "", //年级主任ID

})
let sexList = ref(['男', '女'])
const inputTypeStatus = ref(false)//自定义下拉框是展示开始隐藏
const inputType = ref(1)//输入框筛选  1姓名  2ID
const inputTypeSelect = reactive([{value: 1, label: '姓名'}, {value: 2, label: 'ID'}])

//判断下拉框是显示还是隐藏
const handleVisibleChange = e => {
  inputTypeStatus.value = !inputTypeStatus.value
}
// 删除回调
const onHandle =(type)=>{
  emit('onHandle', type)
}
const search = () => {
  let inputValue = form.inputValue
  if(inputType.value ==1){
    form.teacher_name = inputValue
    form.teacher_id = ''
  }else{
    form.teacher_name = ''
    form.teacher_id = inputValue
  }
  showFlag.value = false
  emit('onChange', form)
}
const reset = () => {
  emit('onChange', form)
}
const showFlag = ref(false)
const changeShowFlag = ()=>{
  showFlag.value = !showFlag.value
}
</script>

<template>
  <v-list class="header_box">
  <div class="head">
    <div class="heads">
      <div class="head_title">
        {{ props.title }}
      </div>
      <div class="search">
        <div style="position: relative;">
          <div class="select">
            {{ inputType == 1 ? '姓名' : 'ID' }}
            <i
              v-if="inputTypeStatus"
              class="ri-arrow-up-s-line"
              style="block-size: 16px;inline-size: 16px;margin-inline-start: 5px;"
            />
            <i
              v-if="!inputTypeStatus"
              class="ri-arrow-down-s-line"
              style="block-size: 16px;inline-size: 16px;margin-inline-start: 5px;"
            />
          </div>
          <VSelect
            v-model="inputType"
            :items="inputTypeSelect"
            item-title="label"
            item-value="value"
            label="Standard"
            placeholder="Select Item"
            style="position: absolute;inset-block-start: 0;inset-inline-start: 0;opacity: 0;"
            eager
            @click="handleVisibleChange"
          />
        </div>

        <VTextField
          v-model="form.inputValue"
          single-line
          placeholder="搜索"
          variant="plain"
          max-width="180px"
          style="block-size: 27px;margin-block-start: -36px;margin-inline-start: 10px;"
        />

        <i
          @click="search"
          class="ri-search-line cursor-pointer"
          style="block-size: 18px;inline-size: 18px;margin-inline-start: auto;"
        />
      </div>

      <div class="right">
        <i
          class="ri-delete-bin-5-line cursor-pointer"
          style="block-size: 24px;inline-size: 24px;margin-inline-start: 24px;"
          @click="onHandle('delete')"
        />
        <VBtn
          color="primary"
          style="margin-inline-start: 24px;"
          @click="onHandle('add')"
        >
          {{ buttonText }}
        </VBtn>
      </div>
    </div>
  </div>
  </v-list>
</template>

<style lang="scss" scoped>
@use "@configured-variables" as variables;

.menu-box{
  border-radius: 6px;
  position: absolute;
  top: 50px;
  left: -135px;
  width: 310px;
  background-color: #fff;
  z-index:999;
}
.input-width-height {
  width: 280px !important;
}

.v-picker-title {
  display: none !important;
}

.right {
  display: flex;
  align-items: center;
  margin-inline-start: auto;
}

.select {
  z-index: 1;
  display: flex;
  align-items: center;
  color: #151619;
  cursor: pointer;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px; /* 157.143% */
  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !important;
}

.head {
  inline-size: 100%;
  padding-block: 12px;

  .heads {
    display: flex;
    align-items: center;
    inline-size: calc(100% - 48px);
    margin-block: 0;
    margin-left: 20px;

    .head_title {
      //color: #423b50;
      font-feature-settings: "ss01" on, "ss04" on;
      font-size: 20px;
      font-style: normal;
      font-variant-numeric: lining-nums tabular-nums;
      font-weight: 500;
      line-height: 140%; /* 28px */
    }

    .search {
      display: flex;
      align-items: center;
      border-radius: 74px;
      background-color: variables.$vertical-nav-background-color;
      inline-size: 291px;
      margin-inline-start: 40px;
      padding-block: 8px;
      padding-inline: 16px;
    }
  }
}
.header_box {
  padding: 0px; 
  overflow: visible;
}
</style>
